import React, { Fragment } from 'react';
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss';
import { SliderContainer , Flex} from "./style";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
function Slider(props) {

    const { bannerList } =props
    
    return (
        <Fragment>
            <SliderContainer>
                <div className="before"></div>
                <div className="slider-container">
                    <Swiper
                        spaceBetween={50}
                        slidesPerView={1}
                        pagination={{ clickable: true }}
                        onSlideChange={() => console.log('slide change')}
                        onSwiper={(swiper) => console.log(swiper)}
                    >
                        {
                            bannerList.map(item=>(
                                <SwiperSlide key={item.key} >
                                    <img src={item.imageUrl} width="100%" height="100%" alt="推荐"/>
                                </SwiperSlide>
                            ))
                        }

                    </Swiper>
                </div>

            </SliderContainer>

        </Fragment>
    );
}

export default Slider;